<script setup>
	import {ref} from 'vue'
	import {onPullDownRefresh} from '@dcloudio/uni-app'
	const jokeText = ref('')
	const getJoke = async ()=> {
		uni.showLoading({
			title:'笑话加载...'
		})
		const res = await uni.request({
			method: 'GET',
			url: 'https://api-vue-base.itheima.net/api/joke',
			data: {}
		})
		jokeText.value = res.data
		uni.hideLoading()
	}
	
	getJoke()
	
	const jokeTextList = ref([])
	const getJokeList = async ()=> {
		uni.showLoading({
			title:'笑话加载...'
		})
		const res = await uni.request({
			method: 'GET',
			url: 'https://api-vue-base.itheima.net/api/joke/list',
			data: {num:3}
		})
		jokeTextList.value = res.data.data
		uni.hideLoading()
	}
	getJokeList()
	
	onPullDownRefresh(async() => {
		uni.showNavigationBarLoading()
		await Promise.all([getJoke(),getJokeList()])
		uni.hideNavigationBarLoading()
		uni.stopPullDownRefresh()
	})
	
</script>

<template>
	<view class="joke column">
		<image class="joke-image" src="../../static/logo.png" mode=""></image>
		<text class="joke-text">{{jokeText}}</text>
		<button class="joke-button" v-if="jokeText" @click="getJoke()" type="primary">换个笑话</button>
		
		
		<button v-if="jokeTextList.length>0" @click="getJokeList()" type="warn">换组笑话</button>
		<view class="joke-list">
			<view class="joke-item" v-for="item in jokeTextList" :key="item">
				<view>
					{{item}}
				</view>
			</view>
		</view>
	</view>
</template>


<style lang="scss">
.joke {
	align-items: center;
	.joke-image{
		width: 300rpx;
		height: 300rpx;
	}
	.joke-button {
		background-color: $uni-color-primary;
	}
	.joke-item {
		border-bottom: 1rpx solid red;
	}
}

</style>
